<template>
      <!--帖子详情-->
      <div class='postDetails' style="margin-left:10px">
      <van-cell class='mx-auto my-5' style="max-width: 750px;"
                :style="{ 'background-color': isNightStyle ? 'rgb(50,50,50)' : 'white',
          'color': isNightStyle ? 'gray' : null}">
          <!-- 更多选项弹窗 -->
        <van-popup v-model="post.showMenu" position="bottom" round
                   :style="{ height: '40' }" @click.stop>
          <div
              :style="{ 'background-color': isNightStyle ? 'rgb(50,50,50)' : 'white',
                    'color': isNightStyle ? 'gray' : null,
                    margin:'20px'}">
            <van-icon name='star-o' size='20' @click='save(post)' v-if='!post.isSaved'/>
            <van-icon v-else color='rgb(255,220,0)' name='star' size='20' @click='save(post)'/>
            收藏
          </div>
          <hr>
          <van-row
              v-if="this.post.authorTelephone !== userInfo.phone"
              :style="{ 'background-color': isNightStyle ? 'rgb(50,50,50)' : 'white',
                    'color': isNightStyle ? 'gray' : null,
                    margin:'20px'}"
              @click.stop="showReportModal = true">
            <van-icon size="20px" name="failure" class="mr-2"></van-icon>
            举报
          </van-row>
          <van-dialog v-model='showReportModal'
                      title='举报'
                      @confirm='submitReport("post",post.postID)'
                      @cancel='clearReportReason'
                      @hidden='clearReportReason'
                      confirm-button-text="提交"
                      show-cancel-button>
            <van-field v-model='reportReason' type="textarea" placeholder='请输入举报原因' rows='8'>
            </van-field>
          </van-dialog>
          <van-row
              v-if="this.post.authorTelephone === userInfo.phone"
              :style="{ 'background-color': isNightStyle ? 'rgb(50,50,50)' : 'white',
                    'color': isNightStyle ? 'gray' : null,
                    margin:'20px'}"
              @click.stop="showDeleteModal = true">
            <van-icon size="20px" name="delete-o" class="mr-2"></van-icon>
            删除
          </van-row>
          <van-dialog v-model="showDeleteModal" message="你确定要删除这个帖子吗？"
                      showCancelButton
                      @confirm="postdelete(post)">
          </van-dialog>
        </van-popup>
        <!-- 帖子作者信息 -->
        <div class="van-row--flex">
          <van-image :src="post.authorAvatar"
                     width="48"
                     height="48"
                     round class="mr-3"></van-image>
          <van-col>
            <div style='margin-top: 10px;margin-left: 5px;' class='username-container'>
              <span style='margin-top: 10px;' class='username'>{{ post.author }}</span>
            </div>
          </van-col>
          <van-col style="margin-top: 10px;margin-left: 5px;">
            <van-tag v-if="post.authorIdentity==='teacher'" color="#7232dd" plain>
              教师
            </van-tag>
            <van-tag
                :color="getTagColor(post.authorTitle)">{{ post.authorTitle }}
            </van-tag>
          </van-col>
        </div>
        <!-- 帖子标题 -->
        <van-row class="post_title">{{ post.title }}
        </van-row>
        <!-- 帖子内容 -->
        <van-row class="post_content"
                 style="margin-bottom: 10px">
          {{ post.content }}
        </van-row>
        <!-- 帖子图片 -->
        <div v-if="fileListGet.length > 0" class="photo-viewer van-row">
          <div class="thumbnail-container">
            <template v-if="fileListGet.length === 4">
              <div>
                <img :src="fileListGet[0]"
                     class="photo"
                     @click="handlePictureCardPreview(fileListGet[0])"
                     @keyup.enter="handlePictureCardPreview(fileListGet[0])"
                     @loadeddata="handlePictureCardPreview(fileListGet[0])"
                     alt="" preview-text="Post Photo"
                />
                <img :src="fileListGet[1]"
                     class="photo"
                     style="margin-top:5px"
                     @click="handlePictureCardPreview(fileListGet[1])"
                     @keyup.enter="handlePictureCardPreview(fileListGet[1])"
                     @loadeddata="handlePictureCardPreview(fileListGet[1])"
                     alt=""
                />
              </div>
              <div>
                <img :src="fileListGet[2]"
                     class="photo"
                     @click="handlePictureCardPreview(fileListGet[2])"
                     @keyup.enter="handlePictureCardPreview(fileListGet[2])"
                     @loadeddata="handlePictureCardPreview(fileListGet[2])"
                     alt=""
                />
                <img :src="fileListGet[3]"
                     class="photo"
                     style="margin-top:5px"
                     @click="handlePictureCardPreview(fileListGet[3])"
                     @keyup.enter="handlePictureCardPreview(fileListGet[3])"
                     @loadeddata="handlePictureCardPreview(fileListGet[3])"
                     alt=""/>
              </div>
            </template>
            <template v-else>
              <div v-for="(file, index) in fileListGet" :key="index">
                <img :src="file"
                     class="photo"
                     @click="handlePictureCardPreview(file)"
                     @keyup.enter="handlePictureCardPreview(file)"
                     @loadeddata="handlePictureCardPreview(file)"
                     alt=""/>
              </div>
            </template>
          </div>
        </div>
        <!-- 帖子内容 -->
        <div>
          <div class='d-flex justify-content-between'>
            <span class='post_content' style="color:rgb(128,128,128);
            margin-left:25px;">{{ formatDate(post.postTime) }}</span>
          </div>
          <!-- 帖子标签 -->
          <div class="tag-group" v-if="post.tag">
            <span class="tag-group__title"></span>
            <van-tag v-for="tag in post.tag" :key="tag.label" :type="tag.type"
                     effect="plain" size="mini">{{ tag.label }}
            </van-tag>
          </div>
        </div>
        <!-- 帖子点赞、浏览量、评论按钮 等-->
        <div class='van-row--flex' style="margin-bottom: 5px;margin-top: 20px;">
          <div class="text-muted">
            <van-icon size="20px" :name="post.isLiked ? 'good-job' : 'good-job-o'"
                      :color="post.isLiked ? '#ee0a24' : ''"
                      @click.stop="like()" :class="{ 'text-danger': post.isLiked }"></van-icon>
            <span class="post-like">{{ post.like }}</span>
          </div>
          <div class="text-muted" style="margin-left:50px">
            <van-icon size="22px" name="eye-o" style="vertical-align: -1px;"></van-icon>
            <span class="browse-like">{{ post.browse }}</span>
          </div>
          <div class='text-muted' style="margin-left:50px; ">
            <van-icon size="20px" name='comment-o' style="vertical-align: -2px;"></van-icon>
            <span class="comment-like">{{ commentsNum }}</span>
          </div>
          <van-button class="div" @click="post.showCommentForm
            = !post.showCommentForm" type="default" plain
                      style="margin-left:20px;border:none;color:blue;margin-top:-1px;
                      text-decoration: underline;text-underline-offset:0.2em;">
            {{ post.showCommentForm ? '隐藏评论' : '评论' }}
          </van-button>
        </div>
      </van-cell>

      <!--显示帖子评论窗口-->
      <van-popup v-model="post.showCommentForm" position="bottom" :style="{ height: '50%' }">
        <div>
          <van-field v-model="pcomment.content"
                     rows="3"
                     autosize
                     maxlength="1000"
                     show-word-limit
                     type="textarea"
                     ref="pcommentTextarea"
                     id="pcommentInput"
                     placeholder="请写下你的精彩评论...">
          </van-field>
        </div>
        <div class="van-row" style="margin-right: 5px">
          <!-- <van-button style="margin-right: 2px"
                      type='default' size="small" plain
                      round native-type="button"
                      @click="showEmojiStatus()">😀
          </van-button> -->
          <div v-if="showEmoji">
            <picker
                :include="['people']"
                :showSearch="false"
                :showPreview="false"
                :showCategories="false"
                @select="addEmojiToPcomment"
            />
          </div>
          <van-button
              @click="pcommentPost"
              round type="primary" :loading="buttonLoading">提交评论
          </van-button>
        </div>

      </van-popup>
    </div>
</template>

<script>
import postService from '@/service/postService';

export default {
  props: {
    postID: Number,
  },
  data() {
    return {

    };
  },
  methods: {
  },
  created() {
    const postMap = {
      PostID: 'postID',
      UserName: 'author',
      UserScore: 'authorTitle',
      UserTelephone: 'authorTelephone',
      UserAvatar: 'authorAvatar',
      UserIdentity: 'authorIdentity',
      Title: 'title',
      Content: 'content',
      Like: 'like',
      Comment: 'comment',
      PostTime: 'postTime',
      Tag: 'tag',
      IsSaved: 'isSaved',
      IsLiked: 'isLiked',
      Photos: 'photos',
      Browse: 'browse',
    };
    const updatePost = (post)=>{
      for(const [sourceKey,targetKey] of Object.entries(postMap)){
        if(key !=== 'Tag' && post.data[])
      }
    }
    postService.showDetails({
      userTelephone: this.userInfo.phone,
      postID: this.postID,
    }).then((post) => {

    });
  },
};
</script>
